<template>
  <div>
    <el-drawer
      v-if="actions.type==='drawer'"
      :destroy-on-close="true"
      :modal="actions.modal"
      :size=" actions.width"
      :visible.sync="actions.visible"
      :wrapper-closable="false"
      custom-class="drawer-form-class"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template slot="title">
        <div class="dialog-title-dynamic">{{ actions.title }}</div>
      </template>
      <div class="drawer-from-style">
        <slot name="content" />
      </div>
      <span v-if="actions.buttom" class="drawer-footer-dynami">
        <el-button v-if="actions.cancelButtom" @click="cancelFirm"> {{ actions.buttonTextLeft }}</el-button>
        <el-button v-if="actions.confirmButtom" type="primary" @click="confirm">{{
          actions.buttonTextRight
        }}</el-button>
      </span>
    </el-drawer>
    <el-dialog
      v-else
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :modal="actions.modal"
      :visible.sync="actions.visible"
      :width=" actions.width"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template slot="title">
        <div class="dialog-title-dynamic">{{ actions.title }}</div>
      </template>
      <span>
        <slot name="content" />
      </span>
      <span v-if="actions.buttom" slot="footer" class="dialog-footer-dynami">
        <el-button v-if="actions.cancelButtom" @click="cancelFirm"> {{ actions.buttonTextLeft }}</el-button>
        <el-button v-if="actions.confirmButtom" type="primary" @click="confirm">{{
          actions.buttonTextRight
        }}</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
export default {
  props: {
    dialogActions: {
      type: Object,
      default: () => ({})
    }

  },
  data() {
    return {
      actions: Object.assign(
        {
          type: '',  // dialog/drawer
          title: '提示',
          editTip: '',
          width: '1080px',
          buttom: true, // /是否显示按钮
          confirmButtom: true,
          cancelButtom: true,
          buttonTextLeft: '取消',
          buttonTextRight: '确定',
          modal: true, // 是否显示遮罩层
          visible: false, // 是否显示
          ...this.dialogActions
        }
      )

    }
  },
  watch: {
    'dialogActions.visible': {
      handler(val) {
        this.actions.visible = val
      }
    },
    'actions.visible': {
      handler(val) {
        this.actions = Object.assign(this.actions, this.dialogActions)
        this.actions.visible = val
      },
      immediate: false
    },
    'actions.title': {
      handler(val) {
        if (val) {
          this.actions.title = val
        }
      },
      immediate: false
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    open() {
      this.actions.visible = true
      this.$emit('update:visible', true)
    },
    close() {
      this.$emit('update:visible', false)
      this.$emit('close')
      this.actions.visible = false
    },
    confirm() {
      this.$emit('confirm')
    },
    cancelFirm() {
      this.actions.visible = false
    }

  }
}
</script>
